<template>
  <view class="address">
    <view class="box" v-for="item in listData">
      <view class="line">
        <view class="left row">
          <view class="icon">
            <u-image
              src="/static/icon/set-address.png"
              width="33rpx"
              height="33rpx"
            ></u-image>
          </view>
          <view class="title">{{item.warehouse}}</view>
        </view>
      </view>
      <view class="line middle space-between">
        <view class="left row">
          <view class="rtitle"
            ><text class="ltitle">名称：</text>让彼达物流</view
          >
        </view>
        <view class="right" @click="$utils.copyMessage('让彼达物流')">复制</view>
      </view>
      <view class="line middle space-between">
        <view class="left row">
          <view class="rtitle"
            ><text class="ltitle">电话：</text
            >{{ item.phone | formatPhone }}</view
          >
        </view>
        <view class="row" style="flex: inherit;">
          <view class="right phone" @click="callPhone(item.phone)"
            >拨打</view
          >
          <view class="right" @click="$utils.copyMessage(item.phone)">复制</view>
        </view>
      </view>
      <view class="line middle space-between">
        <view class="left row">
          <view class="rtitle"
            ><text class="ltitle">省份：</text>{{item.province}}</view
          >
        </view>
        <view class="right" @click="$utils.copyMessage(item.province)">复制</view>
      </view>
      <view class="line middle space-between">
        <view class="left row">
          <view class="rtitle"
            ><text class="ltitle">地址：</text
            >{{item.address}}</view
          >
        </view>
        <view
          class="right"
          @click="$utils.copyMessage(item.address)"
          >复制</view
        >
      </view>
      <view class="line middle space-between">
        <view class="left row">
          <view class="rtitle"><text class="ltitle">邮编：</text>{{item.zipcode}}</view>
        </view>
        <view class="right" @click="$utils.copyMessage(item.zipcode)">复制</view>
      </view>
      <view class="tips">
		复制仓库地址后直接粘贴到购物平台的收件人地址处，会自动填写，另请不要删除地址上的用户ID码 
	  </view>
	  <!-- '让彼达物流 广东省深圳市南山区深圳湾2B702 514540 17564588188' -->
	  <!-- item.warehouse+' 地址：'+item.address+' 姓名：'+userInfo.idcode+'让彼达  邮编：'+item.zipcode+' 手机号码：'+item.phone -->
      <view
        class="btn"
        @click="
          $utils.copyMessage(item.address+' 电话：'+item.phone+' ID：'+userInfo.idcode)
        "
        >一键复制仓库地址</view
      >
    </view>
    <!-- 拨打电话 -->
    <callphone-list
      :popupShow="phoneShow"
      :phoneList="phoneList"
      @noCancel="noCancel"
    ></callphone-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 电话弹框
      phoneShow: false,
      // 电话列表
      phoneList: [],
	  listData:[],
	  userInfo:''
    };
  },
  onShow() {
  	this.getListData();
	this.userInfo = uni.getStorageSync('userInfo') || {};
  },
  methods: {
	getListData(){
		this.$api.post({
		    url: "/ebapi/public_api/warehouse",
		    data: {},
		    success: (res) => {
				this.listData = res;
				console.log(res,"res listData")
			},
		 })
	},
    // 拨打电话取消
    noCancel() {
      this.phoneShow = false;
    },
    // 拨打电话
    callPhone(phoneNum) {
      this.phoneList = [phoneNum];
      this.phoneShow = true;
    },
  },
};
</script>

<style lang="scss">
.address {
  padding-top: 24rpx;
	.row{
		flex: 1;
	}
  .box {
    padding: 48rpx 36rpx 60rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    opacity: 1;
	margin-bottom: 20rpx;
    .line {
      padding-bottom: 20rpx;
      border-bottom: 1px solid #cccccc;

      .left {
        .title {
          font-size: $uni-text-size-title;
          font-weight: bold;
          margin-left: 20rpx;
        }

        .rtitle {
          .ltitle {
            color: #999999;
          }
        }
      }

      .right {
        padding: 10rpx 31rpx;
        border-radius: 30rpx;
        opacity: 1;
        border: 1rpx solid #2354e3;
        color: #2354e3;
      }

      .phone {
        border: 1rpx solid #e82e2e;
        color: #e82e2e;
        margin-right: 10rpx;
      }
    }

    .middle {
      padding-top: 30rpx;
    }

    .tips {
      // color: #999999;
	  color: #e82e2e;
      font-size: 24rpx;
      margin: 32rpx 0 37rpx;
    }

    .btn {
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
      padding: 28rpx 187rpx;
      background-color: $uni-color-main;
      border-radius: 65rpx;
    }
  }
}
</style>
